<template>
  <view class="father-box">
    <public-header title="交接班"></public-header>
    <view class="container-box">
      <view>
        <view class="top-content">
          <view class="box">
            <image class="banner-icon" src="/static/images/setup/handovermgt/static/one.png" />
            <view class="right">
              <view class="top">总数量</view>
              <view class="bottom">{{topInfo.total_num}}</view>
            </view>
          </view>
          <view class="box">
            <image class="banner-icon" src="/static/images/setup/handovermgt/static/yye.png" />
            <view class="right">
              <view class="top">
                实收总额
                <text class="cuIcon-questionfill margin-left"
                  @click="showTip('周期内，实收金额为实际收到的金额，不包括会员卡消费，实收金额=会员充值-会员调额+现金收入+支付宝账户+微信账户+其他收入')"></text>
              </view>
              <view class="bottom">{{topInfo.turnover_total}}</view>
            </view>

          </view>
          <view class="box last">
            <image class="banner-icon" src="/static/images/setup/handovermgt/static/saleNumber.png" />
            <view class="right">
              <view class="top">销售总额
                <text class="cuIcon-questionfill margin-left"
                  @click="showTip('周期内，销售总额为商品实际销售的金额，不包括会员卡的充值，当售后退款时，需减少退款的销售额；销售总额=会员卡消费+现金收入+支付宝账户+微信账户+其他收入。')"></text>
              </view>
              <view class="bottom">{{topInfo.sale_total}}</view>
            </view>

          </view>
        </view>

        <view class="card-items">
          <o-row gutter="10">

            <o-col span="8">
              <view class="card-item">
                <view class="top-header">
                  现金
                </view>
                <view class="down-content">
                  <view class="center-font">
                    <view class="big-font">
                      {{centerInfo.cash_total}}
                    </view>

                    <view @click="seeDetail('cash')" class="fake-a">
                      查看详情>>>
                    </view>

                  </view>
                </view>

              </view>

            </o-col>

            <o-col span="8">
              <view class="card-item">
                <view class="top-header">
                  其他收入
                </view>
                <view class="down-content">
                  <view class="center-font">
                    <view class="big-font">
                      {{centerInfo.other_total}}
                    </view>

                    <view @click="seeDetail('other')" class="fake-a">
                      查看详情>>>
                    </view>

                  </view>
                </view>

              </view>
            </o-col>

            <o-col span="8">
              <view class="card-item">
                <view class="top-header">
                  优惠金额
                </view>
                <view class="down-content">
                  <view class="center-font">
                    <view class="big-font">
                      {{centerInfo.total_num}}
                    </view>

                    <view @click="seeDetail('yh')" class="fake-a">
                      查看详情>>>
                    </view>

                  </view>
                </view>

              </view>
            </o-col>

          </o-row>

        </view>


      </view>

      <view class="bottom-content">
        <view class="bottom-content-item">
          <!-- <view class="font-row">备用金：100.00</view> -->
        </view>
        <view class="bottom-content-item">
          <view>
            <button @click="sureJb" class="button lg" style="width: 25rem;">交班</button>
            <!--  <u-button @click="sureJb" style="width: 10rem; height: 6rem;font-size: 2.5rem;" size="nomal"
              color="rgba(56, 192, 158, 1)" text="按钮形状">交班
            </u-button> -->
          </view>
        </view>
        <view class="bottom-content-item right">
          <view class="flex flex-column">
            <view class="font-row">交班时间：{{nowDate}}</view>
            <view v-if="loginUser" class="font-row"> 操作员：{{loginUser.real_name}}</view>
          </view>
        </view>
        <view class="pop-overlay">

          <u-popup :show="isDetail" :round="20" mode="center" :overlay="true" :closeable="true"
            :closeOnClickOverlay="true" @close="isDetail = false">
            <view class="remark-view">
              <view style="line-height: 6rem;" class="popup-title">

                {{popWindow.title}}
              </view>
              <view class="window-box">
                <view class="center-box">
                  <text v-if="popWindow.type == 'other'">{{otherAmount.other_total||'0'}}</text>
                  <text v-else> {{popWindow.center||'0'}}</text>
                </view>
                <view class="show-y-scroll-bar" style="width: 80%;margin:0 auto;margin-bottom: 3rem;max-height: 40rem;overflow-y: scroll;">
                  <view v-if="popWindow.type == 'cash'">
                    <view class="row">
                      <view class="flex-content">
                        <view> 现金收入：</view>
                        <view> {{popWindow.one}}</view>
                      </view>
                    </view>
                    <view class="row no-border">
                      <view class="flex-content">
                        <view> 现金退货：</view>
                        <view> {{popWindow.two}}</view>
                      </view>
                    </view>
                  </view>

                  <view v-if="popWindow.type == 'other'">
                    <view class="row" v-for="item in otherCols">
                      <view class="flex-content">
                        <view> {{item.label}}： </view>
                        <view> {{otherAmount[item.col]||'0'}}</view>
                      </view>
                    </view>
                    <!--   <view class="row">
                      <view class="flex-content">
                        <view> 支付宝收入： </view>
                        <view> {{popWindow.one}}</view>
                      </view>

                    </view>
                    <view class="row">
                      <view class="flex-content">
                        <view> 银联收入：</view>
                        <view> {{popWindow.two}}</view>
                      </view>
                    </view>

                    <view class="row no-border">
                      <view class="flex-content">
                        <view> 银联退货：</view>
                        <view> {{popWindow.three}}</view>
                      </view>

                    </view> -->
                  </view>

                  <view v-if="popWindow.type == 'account'">
                    <view class="row" v-for="item in discountCols">
                      <!--  <view class="flex-content">
                        <view> 其他： </view>
                        <view> {{popWindow.one}}</view>
                      </view> -->
                      <view class="flex-content">
                        <view>{{item.label||''}}: </view>
                        <view> {{discountAmount[item.col]||'0'}}</view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </u-popup>
        </view>
      </view>
    </view>

    <view class="custom-center-popup">
      <u-popup :show="modalName==='tipPopup'" :round="20" mode="center" :overlay="true" :closeable="true"
        :closeOnClickOverlay="true" @close="close" v-if="curTip">
        <view class="table-explain text-white">
          <u-parse :content="curTip"></u-parse>
        </view>
      </u-popup>
    </view>

  </view>
</template>

<script>
  // import '@/static/images/setup/handovermgt/static/overlay.css'
  export default {
    data() {
      return {
        modalName: "",
        curTip: "",
        topInfo: {},
        centerInfo: {},
        isDetail: false,
        popWindow: {
          type: '',
          center: '',
        },
        divType: '',
        nowDate: '',
        startTimePromise: null,
        cashAmount: {},
        discountAmount: {},
        discountCols: [{
            label: '会员优惠',
            col: 'member_discount'
          },
          {
            label: '促销-满额减现',
            col: 'discount_full_decrement'
          },
          {
            label: '促销-满额折扣',
            col: 'discount_direct'
          },
          {
            label: '整单改价',
            col: 'order_change_price'
          },
          {
            label: '免单优惠',
            col: 'free_discount_amount'
          },
          {
            label: '积分抵扣',
            col: 'integral_deduction'
          },
          {
            label: '抹零金额',
            col: 'cash_reduction_amount'
          },
          {
            label: '商品改价',
            col: 'goods_change_price'
          },
        ],
        otherAmount: {},
        otherCols: [{
            label: '会员余额收入',
            col: 'hyye_income'
          },
          {
            label: '会员余额退款',
            col: 'member_balance_refund'
          },
          {
            label: '微信收入',
            col: 'wx_income'
          },
          {
            label: '微信退款',
            col: 'wx_refund'
          },
          {
            label: '支付宝收入',
            col: 'zfb_income'
          },
          {
            label: '支付宝退款',
            col: 'zfb_refund'
          },
          {
            label: '银联收入',
            col: 'yl_income'
          },
          {
            label: '银联退款',
            col: 'yl_refund'
          },
          {
            label: '和包收入',
            col: 'package_income'
          },
          {
            label: '和包退款',
            col: 'package_refund'
          },
        ]
      }
    },
    computed: {
      putupOrders() {
        return this.$store?.state?.$putupOrders || []
      },
    },
    methods: {
      close() {
        this.curTip = ''
      },
      showTip(e) {
        this.curTip = e
        if (e) {
          this.modalName = 'tipPopup'
        }
      },
      getTime(date) {
        let filterDate = function(date) {
          if (date < 10) {
            return `0${date}`
          } else {
            return date;
          }
        }
        console.log("我被打印了---");
        let year = date.getFullYear();
        let month = filterDate(date.getMonth());
        let dates = filterDate(date.getDate());
        let Hour = filterDate(date.getHours());
        let minutes = filterDate(date.getMinutes());
        let seconds = filterDate(date.getSeconds());

        return `${year}-${month}-${dates} ${Hour}:${minutes}:${seconds}`;
      },
      sureJb() {
        let store = uni.getStorage({
          key: 'start_time'
        });

        if (Array.isArray(this.putupOrders) && this.putupOrders.length > 0) {
          uni.showModal({
            title: '提示',
            content: '有挂单未处理，是否处理?',
            cancelText: '继续交接班',
            confirmText: '处理挂单',
            success: (res) => {
              if (res.cancel) {
                // 点击取消 继续执行交接班
                this.requestStaffHandover()
              } else {
                uni.reLaunch({
                  url:'/pages/main/cash/cash?showPutOrder=true'
                })
              }
            }
          })
          return
        } else {
          uni.showModal({
            title: '提示',
            content: `确认要交班`,
            success: async (res) => {
              if (res.confirm) {
                this.requestStaffHandover()
              } else if (res.cancel) {
                uni.showToast({
                  title: `已取消交班`,
                  icon: 'none',
                  duration: 2000
                });

              }
            }
          });
        }

      },
      async requestStaffHandover() {
        let nowDate = new Date();
        // let returnData = this.getTime(nowDate);
        let returnData = this.dayjs().format("YYYY-MM-DD HH:mm:ss")
        const storeData = await this.startTimePromise;
        // const url = '/retail/operate/srvretail_staff_handover_add'
        const url = `/retail/operate/srvretail_shift_handover_operation`
        const req = [{
          "serviceName": "srvretail_shift_handover_operation",
          // "serviceName": "srvretail_staff_handover_add",
          "data": [{
            "order_amount": this.topInfo.total_num,
            "turnover": this.topInfo.turnover_total,
            "sales": this.topInfo.sale_total,
            "cash": this.centerInfo.cash_total,
            "other": this.centerInfo.other_total,
            "discount": this.centerInfo.total_num,
            "staff_no": this.tenantInfo?.user_no,
            store_no:this.tenantInfo?.tenant_no,
            "handover_date": returnData,
            "start_time": uni.getStorageSync('start_time') || storeData.data,
            "end_time": this.end_time,
            "terminal_type": "mt"
          }],
        }]

        const res = await this.$http.post(url, req)
        if (res?.data?.state === 'SUCCESS') {
          uni.showModal({
            title: '提示',
            content: '交班成功',
            showCancel: false,
            success: (res) => {
              if (res.confirm) {
                uni.reLaunch({
                  url: '/pages/main/login/login'
                })
              }
            }
          })
        } else {
          uni.showToast({
            title: `交班失败`,
            icon: 'none',
            duration: 2000
          });
        }

      },
      filterNumber(num) {
        if (num < 0) {
          this.divType = 'red';
        }
        return num;
      },
      seeDetail(type) {
        if (type == "cash") {
          const url = `/retail/select/srvretail_cash_detail_count_select`;
          const req = {
            // tanent_number:
            "serviceName": "srvretail_cash_detail_count_select",
            "colNames": ["*"],
          }
          this.$http.post(url, req).then(res => {
            if (res?.data?.state === 'SUCCESS') {
              if (res.data.data.length > 0) {
                this.cashAmount = res.data.data[0]
              }
              this.popWindow.type = 'cash'
              this.popWindow.title = "现金收入";
              this.isDetail = true;
              this.popWindow.center = res.data.data[0].cash_total;
              this.popWindow.one = res.data.data[0].cash_income
              this.popWindow.two = this.filterNumber(res.data.data[0].cash_refund)
            }
          })
        } else if (type == "other") {
          const url = `/retail/select/srvretail_orther_detail_count_select`;
          const req = {
            "serviceName": "srvretail_orther_detail_count_select",
            "colNames": ["*"],

          }
          this.$http.post(url, req).then(res => {
            if (res?.data?.state === 'SUCCESS') {
              if (res.data.data.length > 0) {
                this.otherAmount = res.data.data[0]
              }
              this.popWindow.type = 'other'
              this.popWindow.title = "其他收入";
              this.isDetail = true;
              this.popWindow.center = res.data.data[0].total_num;
              this.popWindow.one = res.data.data[0].zfb_income;
              this.popWindow.two = res.data.data[0].yl_income;
              this.popWindow.three = this.filterNumber(res.data.data[0].wx_refund);
            }
          })
        } else {
          const url = `/retail/select/srvretail_discount_detail_count_select`;
          const req = {
            "serviceName": "srvretail_discount_detail_count_select",
            "colNames": ["*"],
          }
          this.$http.post(url, req).then(res => {
            if (res?.data?.state === 'SUCCESS') {
              if (res.data.data.length > 0) {
                this.discountAmount = res.data.data[0]
              }
              this.popWindow.type = 'account'
              this.popWindow.title = "优惠金额";
              this.isDetail = true;
              this.popWindow.center = res.data.data[0].total_num;
              this.popWindow.one = this.filterNumber(res.data.data[0].other_total)
            }
          })
        }
      },

      async getList() {
        const url = `/retail/select/srvretail_handover_statistics_select`;
        const req = {
          "serviceName": "srvretail_handover_statistics_select",
          "colNames": ["*"],
        }
        let promise = new Promise((resolve, reject) => {
          this.$http.post(url, req).then(res => {
            if (res?.data?.state === 'SUCCESS') {
              console.log(res.data.data, "res.data.data", "res--res--")
              this.topInfo = res.data.data[0]
            }
            resolve()
          }).catch(_ => {
            resolve()
          })
        });

        let promise2 = new Promise((resolve, reject) => {
          const url2 = `/retail/select/srvretail_staff_handover_count_select`;

          const req2 = {
            // tanent_number:
            "serviceName": "srvretail_staff_handover_count_select",
            "colNames": ["*"],

          }
          this.$http.post(url2, req2).then(res => {
            if (res?.data?.state === 'SUCCESS') {
              console.log(res.data.data, "res.data.data", "res--res--")
              this.centerInfo = res.data.data[0]

              // this.list = res.data.data;
            }
            resolve()
            // uni.hideLoading()
          }).catch(_ => {
            // uni.hideLoading()
            resolve()
          })
        })

        return Promise.all([promise, promise2])
      },
      toPages(target) {
        if (target) {
          uni.navigateTo({
            url: target
          })
        }
      }
    },
    onLoad(option) {

      this.startTimePromise = new Promise((resolve, reject) => {
        uni.getStorage({
          key: 'start_time',
          success: function(res) {
            resolve(res);
          }
        });
      })

      this.nowDate = this.dayjs().format("YYYY-MM-DD HH:mm:ss");
      // this.nowDate = this.getTime(new Date());
      this.getList();
    }

  }
</script>

<style lang="scss" scoped>
  uni-page-body {
    height: 100%;
  }

  .flex-content {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .no-border {
    border: 0px !important;
  }

  .banner-icon {
    width: 12rem;
    height: 12rem;
  }

  .red {
    color: rgba(255, 87, 51, 1);
  }



  .window-box {
    width: 70rem;

    .center-box {

      font-weight: 700;
      font-size: 6rem;
      // height: 18rem;
      font-weight: 700;
      border-radius: 10px;
      background: rgba(245, 245, 245, 1);
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 3rem;

      padding-top: 4rem;
      padding-bottom: 4rem;

    }


    .row {
      display: flex;
      justify-content: center;
      align-items: center;
      // border-bottom: 1px solid rgba(229, 229, 229, 1);
      height: 7rem;
      font-size: 3rem;
      font-weight: 600;
    }
  }

  .father-box {
    background: white;
    height: 100vh;

  }

  .container-box {
    // height: 100%;
    padding-top: 6rem;
    padding-left: 42px;
    padding-right: 42px;
    background: rgba(255, 255, 255, 1);


    .top-content {
      display: flex;
      border: 1px solid rgba(229, 229, 229, 1);
      margin-bottom: 20px;

      .box {
        border-right: 1px solid rgba(229, 229, 229, 1);
        padding: 20px 20px;
        display: flex;
        flex: 1;
        justify-content: center;



        .right {
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-left: 28px;

          .top {
            font-size: 3rem;
            color: #383838;
            margin-bottom: 2rem;

          }

          .bottom {
            font-size: 4rem;
            font-weight: 800;
            color: #383838;



          }
        }
      }

      .last {
        border-left: 0px;
      }


    }

    .card-items {
      .card-item {
        .top-header {
          border-radius: 10px 10px, 0px, 0px;
          background: rgba(56, 192, 158, 1);
          color: white;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 11rem;
          border-radius: 10px 10px, 0px, 0px;
          font-size: 4rem;


        }

        .down-content {
          border-radius: 10px;
          background: rgba(245, 245, 245, 1);
          display: flex;
          justify-content: center;
          align-items: center;

          .center-font {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 170px;

            .big-font {

              font-size: 6rem;
              font-weight: 700;
              margin-bottom: 4rem;

            }

            .fake-a {
              cursor: pointer;
              font-size: 3rem;

            }
          }


        }
      }
    }


    .bottom-content {
      position: fixed;
      bottom: 0;
      right: 0;
      left: 0;
      background: rgba(245, 245, 245, 1);
      height: 12rem;
      align-items: center;
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding-left: 10rem;
      padding-right: 10rem;

      &-item {
        flex: 1;
        display: flex;
        justify-content: center;

        &.right {
          justify-content: flex-end;
        }

        .flex-column {
          flex-direction: column;
          align-items: flex-start;
          max-width: 40rem;
        }

        .font-row {
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }

  .custom-center-popup {
    ::v-deep .u-popup__content {
      background-color: transparent !important;
    }

    .table-explain {
      padding: 6rem;
      max-height: 90vh;
      overflow-y: scroll;
      width: 50vw;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 2rem;
    }
  }
</style>
